<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>注册</title>
    <link rel="stylesheet" href="../assets/libs/particles/css/style.css">
    <link rel="stylesheet" href="../assets/libs/sweetalert2/sweetalert2.min.css">
    <link rel="stylesheet" href="../assets/css/base.css">
    <link rel="stylesheet" href="../assets/css/login.css">
</head>

<body>
    <!-- 背景颗粒开始 -->
    <div id="particles-js"></div>
    <!-- 背景颗粒结束 -->

    <div id="wrapper">
        <div>
            <a href=""><img src="../assets/img/logo.png" /></a>
            <h2>与世界分享你的知识、经验和见解</h2>
        </div>
        <nav class="switch_nav">
            <a href="javascript:;" id="switch_signup" class="switch_btn on">注册</a>
            <a href="login.html" id="switch_login" class="switch_btn">登陆</a>
            <div class="switch_bottom" id="switch_bottom"></div>
        </nav>
        <form method="POST" action="##" id="form1" onsubmit="return false">
            <ul class="group_input">
                <li>
                    <input type="text" placeholder="手机号(仅支持中国大陆)" maxlength="11" class="mobile required" id="mobile" name="username" />
                </li>
                <li>
                    <input type="password" placeholder="密码(不少于6位)" class="psd required" minlength="6" maxlength="20" id="psd" name="userpassword" />
                </li>
            </ul>
            <button type="submit" class="submit_btn" id="btnSubmit">注册</button>
            <!-- <input type="submit" class="submit_btn" id="btnSubmit" onclick="sendSubmit()">注册许创书城</input> -->
            <span class="agreement-tip">点击「注册」按钮，即代表你同意<a href="javascript:;">《许创书城协议》</a></span>
        </form>

        <!-- 下载二维码开始 -->
        <div class="QRcode_btn">
            <div type="submit" class="submit_btn download_btn">下载许创书城App</div>
            <div class="QRcode">
                <img src="../assets/img/QRcode.png" alt="QRcode" />
                <div class="box"></div>
            </div>
        </div>
        <!-- 下载二维码结束 -->


    </div>
    <script src="../assets/libs/jquery-1.12.4/jquery.min.js"></script>
    <!-- <script src="../assets/libs/sweetalert2/sweetalert2.min.js"></script> -->
    <script src="../assets/libs/particles/particles.min.js"></script>
    <script src="../assets/libs/particles/js/app.js"></script>
    <!-- <script src="../assets/libs/particles/js/lib/stats.js"></script> -->

    <script>
        $(".download_btn").click(function() {
            if ($(".QRcode").css("display") == "none") {
                $(".QRcode").show();
                $(".download_btn").text("关闭二维码");
            } else {
                $(".QRcode").hide();
                $(".download_btn").text("下载知乎App");
            }
        });
    </script>
    <script>
        var flag1 = false;
        var flag2 = false;
        var flag3 = false;
        $(function() {
            $("form :input").blur(function() {
                var $parent = $(this).parent();
                $parent.find(".msg").remove(); //删除以前的提醒元素（find()：查找匹配元素集中元素的所有匹配元素）
                //验证姓名
                if ($(this).is("#name")) {
                    var nameVal = $.trim(this.value);
                    var regName = /[~#^$@%&!*()<>:;'"{}【】  ]/;
                    if (nameVal == "" || nameVal.length < 2 || regName.test(nameVal)) {
                        var errorMsg = " 姓名非空，长度2-20位，不包含特殊字符！";
                        $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                    } else {

                        var okMsg = " 输入正确";
                        $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                    }
                }
                //验证手机号
                if ($(this).is("#mobile")) {
                    var mobileVal = $.trim(this.value);
                    var regMobile = /^1[3|4|5|7|8][0-9]{9}$/;
                    if (mobileVal == "" || !regMobile.test(mobileVal)) {
                        var errorMsg = " 请输入有效的11位手机号码！";
                        $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                    } else {
                        var okMsg = " 输入正确";
                        $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");
                    }
                }
                //验证密码
                if ($(this).is("#psd")) {
                    var psdVal = $.trim(this.value);
                    var regPsd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
                    if (psdVal == "" || !regPsd.test(psdVal)) {
                        var errorMsg = " 密码为6-20位字母、数字的组合！";
                        $parent.append("<span class='msg onError'>" + errorMsg + "</span>");
                    } else {
                        var okMsg = " 输入正确";
                        $parent.append("<span class='msg onSuccess'>" + okMsg + "</span>");

                    }
                }
            }).keyup(function() {
                //triggerHandler 防止事件执行完后，浏览器自动为标签获得焦点
                $(this).triggerHandler("blur");
            }).focus(function() {
                $(this).triggerHandler("blur");
            });

            //点击重置按钮时，通过trigger()来触发文本框的失去焦点事件
            $("#btnSubmit").click(function() {
                //trigger 事件执行完后，浏览器会为submit按钮获得焦点
                $("form .required:input").trigger("blur");
                var numError = $("form .onError").length;
                console.log($("form .onError"));
                if (numError) {
                    return false;

                } else {
                    $.ajax({
                        type: "POST", //方法类型
                        dataType: "json", //预期服务器返回的数据类型
                        // url: "http://10.10.86.28:8080/user/register", //url
                        url: "http://10.10.86.10:80/user/register", //url
                        // data: $('#form1').serialize(),
                        contentType: "application/json",
                        data: JSON.stringify({
                            'u_name': $('#mobile').val(),
                            'u_password': $('#psd').val()
                        }),
                        success: function(result) {
                            console.log(result);
                            if (result.code == 0) {
                                // alert('注册成功');
                                alert('注册成功，正在跳转登录界面');
                                setTimeout("javascript:location.href='login.html'", 1000);

                            } else if (result.code == 2) {
                                alert(result.msg);
                            }
                        },
                        error: function() {
                            alert("异常!");
                        }
                    });


                }

            });
        })
    </script>
</body>

</html>